<template>
    <div>
        <h1>注册</h1>
        <p>请输入用户:<a-input placeholder="用户名" style="width:300px" v-model="username"/></p>
        <p>请输入密码:<a-input placeholder="密码"  type="password" style="width:300px" v-model="password"/></p>
        <p>请输手机号:<a-input placeholder="手机号" style="width:300px" v-model="phone" />
        </p><button @click="sho4(phone)">发送验证码</button>
        <p>输入验证码:<a-input placeholder="验证码" v-model="code" style="width:300px" /></p>
        <p><img :src="'http://127.0.0.1:8000/tupian/?uu_id=' +uu_id" @click="sho1"></p>
        <p>请输入验证:<input type="text" placeholder="请输入验证码" v-model="yzm" @blur="sho2"><br></p>
        <span v-show="is_yzm" style="color:red">{{tex}}</span>
        <p><a-button type="primary" @click="sho3" style="width:80px">注册</a-button></p>
       


    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
        uu_id:"",
        yzm:"",
        is_yzm:false,
        username:'',
        password:'',
        phone:'',
        tex:'',
        code:'',
        }
    },
    methods: {
   sho1(){
      axios.get('yzm/')
      .then(res=>{
      this.uu_id=res.data.uu_id
    })
},
   sho2(){
       axios.get('uuid/',{params:{'uu_id':this.uu_id,'yzm':this.yzm}})
       .then(resp=>{
           if (resp.data.code==200){
               this.is_yzm=false
           }else{
               this.is_yzm=true
               this.tex=resp.data.msg
           }
       })
   },
   sho3(){
       if(this.is_yzm==true){
        alert('请输入正确的验证码')
      }else{
       axios.post('user/',{
        'username':this.username,
        'password':this.password,
        'phone':this.phone,
        'code':this.code
        })
       .then(resp=>{
         alert(resp.data.msg)
       }).catch(error=>{
           alert(resp.data.msg)
       })}
   },
   sho4(phone){
       this.$axios({
           'url':'phone_msm/',
           'method':'POST',
           'data':{
               'phone':phone
           }
       }).then(resp=>{
           console.log(resp.data)
           alert(resp.data.msg)
       }).catch(error=>{
           console.log(error)
       })
   }
    },
    created() {
this.sho1()
    }
}
</script>

<style scoped>

</style>
